<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script
	src="${pageContext.request.contextPath}/resource/bootstrap-treeview/js/bootstrap-treeview.js"></script>
<link
	href="${pageContext.request.contextPath}/resource/bootstrap-treeview/css/bootstrap-treeview.css"
	rel="stylesheet">
<body>

	<div class="container">
		<!-- 一行 -->
		<div class="row">
			<!--第1列显示分类树  -->
			<div class="col-md-6">
				<div id="tree"></div>
			</div>

			<!-- 第2列显示右侧部分 -->
			<div class="col-md-6">
				<!-- 添加的form -->
				<form id="addForm">
					<div class="form-group row">
						<input type="hidden" name="parentId" id="parentId" value="">
						<label for="parentName" class="col-sm-2 col-form-label">父分类名</label>
						<div class="col-sm-10">
							<input type="text" disabled="disabled" class="form-control"
								id="parentName">
						</div>
					</div>
					<div class="form-group row">
						<label for="catPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" name="path" class="form-control" id="catPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="catName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control" id="catName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="addCat()">添加分类</button>
				</form>



				<hr>
				<!-- 修改和删除的form -->
				<form id="delupdateForm">

					<input type="hidden" id="currentId" name="id">
					<div class="form-group row">
						<label for="currentCatPath" class="col-sm-2 col-form-label">分类路径</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="path"
								id="currentCatPath">
						</div>
					</div>
					<div class="form-group row">
						<label for="currentCatName" class="col-sm-2 col-form-label">分类</label>
						<div class="col-sm-10">
							<input type="text" name="name" class="form-control"
								id="currentCatName">
						</div>
					</div>
					<button type="button" class="btn btn-primary" onclick="updateCat()">修改分类</button>
					<button type="button" id="delButton" class="btn btn-primary"
						onclick="delCat()">删除分类</button>
				</form>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

//删除分类
function delCat(){
	var formData = $("#delupdateForm").serialize();
	$.post("./cat/del",formData,function(resp){
		if(resp){
			alert("del成功");
			initTree();//重新加载tree
		}else{
			alert("del失败")
		}
	})
}

//修改分类
function updateCat(){
	var formData = $("#delupdateForm").serialize();
	$.post("./cat/update",formData,function(resp){
		if(resp){
			alert("修改成功");
			initTree();//重新加载tree
		}else{
			alert("修改失败")
		}
	})
}

//添加分类
function addCat(){
	var formData = $("#addForm").serialize();
	$.post("./cat/add",formData,function(resp){
		if(resp){
			alert("添加成功");
			initTree();//重新加载tree
		}else{
			alert("添加失败")
		}
	})
}


	//初始化树
	initTree();

	function initTree() {

		$.post("cat/getTree", {
			'id' : 0
		}, function(data) {

			$('#tree').treeview({
				data : data,
				levels : 2,
				onNodeSelected: function(event, data) {
				    //console.log(data.text)
				    $("#parentName").val(data.text);
				    $("#catPath").val(data.path);
				    $("#currentCatPath").val(data.path);
				    $("#currentCatName").val(data.text);

				    //为隐藏域的id赋值
				    $("#parentId").val(data.id);
				    $("#currentId").val(data.id);
				    
				    
				    
				    
				    if(data.nodes.length==0){
				    	//删除按钮置亮
				    	$("#delButton").attr("disabled",false);
					}else{
						//删除按钮置灰
						$("#delButton").attr("disabled",true);
					}
				}
			});

		})

	}
</script>
</html>